import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Area } from '@ant-design/plots';

const LineChart = ({ chartData }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(chartData);
  }, [chartData]);

  const config = {
    data,
    xField: 'date',
    yField: 'exchangeRate',
    height: 400,
    xAxis: {
      range: [0, 1],
      tickCount: 5,
    },
    yAxis: {
      title: {
        text: '汇率',
        spacing: 6
      },
    },
    meta: {
      exchangeRate: {
        alias: '汇率',
      },
    },
    areaStyle: () => {
      return {
        fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
      };
    },
  };
  return <Area {...config} />;
}

export default LineChart